<template>
  <div class="guanzhu">
    <van-button
      v-if="type"
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      size="small"
      icon="success"
      @click="delUserGuanZhu"
    >已关注</van-button>
    <van-button
      v-else
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      size="small"
      icon="plus"
      @click="addUserGuanZhu"
    >未关注</van-button>
  </div>
</template>

<script>
import { addGuangZhu, deleteGuanZhu } from "@/api/axios";
import { Dialog } from "vant";
export default {
  name: "guanzhu",
  props: {
    type: {
      type: Boolean,
      required: true, //必须有，，否则报错
    },
    userId: {
      type: [String, Number],
      required: true, //必须有，，否则报错
    },
  },
  methods: {
    // 添加关注
    async addUserGuanZhu() {
      try {
        const { data: res } = await addGuangZhu(this.userId);
        this.$emit("follow_toggle", !this.type);
        this.$toast.success("谢谢一路有你！");
      } catch (err) {
        console.log(err.request, 9999);
        if (err.request.status == 401) {
          this.$dialog
            .confirm({
              title: "登陆信息",
              message: "亲，你还没有登陆，是否现在登陆？",
            })
            .then(() => {
              // on confirm
              this.$router.push("/login");
            })
            .catch(() => {
              // on cancel
              this.$toast.fail("万水千山总是情，点个关注行不行");
            });
        }
      }
    },
    // 取消关注
    async delUserGuanZhu() {
      try {
        const { data: res } = await deleteGuanZhu(this.userId);
        this.$toast.fail("万水千山总是情，点个关注行不行");
        this.$emit("follow_toggle", !this.type);
      } catch (err) {
        console.log(err);
        this.$toast.fail("系统有误,稍后再试！");
      }
    },
  },
};
</script>

<style scoped>
</style>